The <video> tag in HTML is used to attach video content to a webpage for visual representation of video content. Here's a guide on how to use it effectively:
Basic Syntax
<video src="video.mp4" controls>
Your browser does not support the video tag.
</video>Video tag Attributes:
- src: Pass the path to the video file.
- controls: Attach video controls like play, pause, volume up and down, etc.
- width and height: Sets the dimensions of the video player on html page.
- autoplay: Automatic starts playing the video when the page loads.
- loop: Re-plays the video after it ends.
- muted: Mutes the video sound by default.
- poster: Specifies an image (like a thumbnail on video content) to be shown while the video is downloading or until the user hits the play button.
- preload: Suggests how the browser should load the video when the page loads. It can take the values auto, metadata, or none.
Example with Multiple Sources:
To ensure compatibility with different browsers, provide multiple video formats like (.mp4, .ogg, .mp3, .webm, etc) using the <source> tag:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>Example with Additional Attributes:
<video width="640" height="360" controls autoplay loop muted poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>Using the <track> Tag:
For accessibility, you can add subtitles or captions in your video using the <track> tag:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Example with Fallback Content:
If the video tag is not supported, you can show fallback content to users that your device does not support video.
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
<a href="video.mp4">Download the video</a> to view it.
</video>By using the `<video>` tag with these attributes and techniques, you can effectively embed video content that is accessible and compatible across different web browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video Example</title>
</head>
<body>
<h2>My Video</h2>
<!-- The video tag is used to embed the video -->
<!-- Width and height attributes specify the dimensions of the video player -->
<!-- Controls attribute adds video controls like play, pause, volume, etc. -->
<video width="640" height="360" controls>
<!-- The source tag specifies the path to the video file and its MIME type -->
<!-- This allows the browser to choose the appropriate video format based on its capabilities -->
<source src="example_video.mp4" type="video/mp4">
<!-- Fallback content displayed if the browser does not support the video tag or any of the video formats -->
Your browser does not support the video tag.
</video>
</body>
</html>
In this example:
- The <video> tag is used to attach the video.
- The width and height attributes specify the dimensions of the video player.
- The controls attribute attaches video controls like play, pause, volume, etc.
- Inside the <video> tag, a <source> tag is used to specify the path to the video file (example_video.mp4) and its MIME type (video/mp4). This allows the browser to choose the appropriate video format based on its capabilities.
- If the browser does not support the <video> tag or any of the video formats specified, the message "Your browser does not support the video tag." is displayed as fallback content.
- Make sure to replace
"example_video.mp4"with the actual path to your video file.
Leave Comment